<template>
  <div class="platform">
    <div class="platform-title">排队中。。。</div>
    <div class="platform-space">
      <label>区间：{{ space }}</label>
      &nbsp;
      <input type="button" @click="start" value="开始"/>
    </div>
    <div class="platform-list">
        <p v-for="item in roles" :key="item">
            {{item}} 
        </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Platform',
  props: {
    me: String,
    space: String,
    inLine: Boolean,
    inGame: Boolean,
    serial: Number,
    roles: [],
  },
  data () {
      return {
          
      }
  },
  methods: {
    //开始游戏
    start(){
      this.axios.get(
        'http://' + window.location.hostname + ':14000/cola/game_start/' + this.space + '/'
        ).then(res => {
          let result = res.data
          console.log(result)
          if(result.code == 0){
            this.$emit('update:serial',result.data);
            console.log(result.msg)
          }else{
            console.log(result.msg)
            alert(result.msg)
          }
      })
    },
    work(){
      // 打开游戏界面
      this.$emit('update:inLine',false);
      this.$emit('update:inGame',true);
    },
    // 发送消息
    send(msg){
      this.$parent.send(msg)
    },
    // 接收到ws发来的消息
    receive(data){
        console.log(data)
    },
  }
}
</script>

<style scoped lang="scss">

.platform {
  text-align: center;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row dense;
}

.platform-title {
  grid-column-start: 3;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 3;
}

.platform-space {
  grid-column-start: 3;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 5;
}

.platform-list {
  grid-column-start: 3;
  grid-column-end: 10;
  grid-row-start: 6;
  grid-row-end: 10;
  display: grid;
  text-align: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row dense;
}

.platform-list div{
  grid-column-start: 1;
  grid-column-end: 1;
}

</style>
